<%-- 
    Document   : login
    Created on : 30-may-2014, 22:41:20
    Author     : Jorge Aguilar
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>AdminLTE | Dashboard</title>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
        <!-- bootstrap 3.0.2 -->
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- font Awesome -->
        <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <!-- Ionicons -->
        <link href="css/ionicons.min.css" rel="stylesheet" type="text/css" />
        <!-- Theme style -->
        <link href="css/AdminLTE.css" rel="stylesheet" type="text/css" />

        
        <link rel="stylesheet" href="../amcharts/style.css"	type="text/css">

		<script src="amcharts/amcharts.js" type="text/javascript"></script>
		<script src="amcharts/serial.js" type="text/javascript"></script>
		<script src="amcharts/amstock.js" type="text/javascript"></script>

		<script type="text/javascript">
			AmCharts.ready(function () {
				generateChartData();
				createStockChart();
			});

			var chartData = [];                        

			function generateChartData() {				
                                    chartData.push({
                                        "date": "2013-02-03",
                                        "value": 64
                                    }, {
                                        "date": "2013-02-04",
                                        "value": 66
                                    }, {
                                        "date": "2013-02-05",
                                        "value": 60
                                    }, {
                                        "date": "2013-02-06",
                                        "value": 63
                                    }, {
                                        "date": "2013-02-07",
                                        "value": 61
                                    }, {
                                        "date": "2013-02-08",
                                        "value": 60
                                    }, {
                                        "date": "2013-02-09",
                                        "value": 65
                                    }, {
                                        "date": "2013-02-10",
                                        "value": 75
                                    }, {
                                        "date": "2013-02-11",
                                        "value": 77
                                    }, {
                                        "date": "2013-02-12",
                                        "value": 78
                                    }, {
                                        "date": "2013-02-13",
                                        "value": 70
                                    }, {
                                        "date": "2013-02-14",
                                        "value": 70
                                    }, {
                                        "date": "2013-02-15",
                                        "value": 73
                                    }, {
                                        "date": "2013-02-16",
                                        "value": 71
                                    }, {
                                        "date": "2013-02-17",
                                        "value": 74
                                    }, {
                                        "date": "2013-02-18",
                                        "value": 78
                                    }, {
                                        "date": "2013-02-19",
                                        "value": 85
                                    }, {
                                        "date": "2013-02-20",
                                        "value": 82
                                    }, {
                                        "date": "2013-02-21",
                                        "value": 83
                                    }, {
                                        "date": "2013-02-22",
                                        "value": 88
                                    }, {
                                        "date": "2013-02-23",
                                        "value": 85
                                    }, {
                                        "date": "2013-02-24",
                                        "value": 85
                                    }, {
                                        "date": "2013-02-25",
                                        "value": 80
                                    }, {
                                        "date": "2013-02-26",
                                        "value": 87
                                    }, {
                                        "date": "2013-02-27",
                                        "value": 84
                                    }, {
                                        "date": "2013-02-28",
                                        "value": 83
                                    }, {
                                        "date": "2013-02-29",
                                        "value": 84
                                    }, {
                                        "date": "2013-02-30",
                                        "value": 81
                                    });
			}


			function createStockChart() {
				var chart = new AmCharts.AmStockChart();
				chart.pathToImages = "../amcharts/images/";

				// DATASETS //////////////////////////////////////////
				var dataSet = new AmCharts.DataSet();
				dataSet.color = "#b0de09";
				dataSet.fieldMappings = [{
					fromField: "value",
					toField: "value"
				}];
				dataSet.dataProvider = chartData;
				dataSet.categoryField = "date";

				chart.dataSets = [dataSet];

				// PANELS ///////////////////////////////////////////
				var stockPanel = new AmCharts.StockPanel();
				stockPanel.showCategoryAxis = true;
				stockPanel.title = "Cantidad";
				stockPanel.eraseAll = false;

				var graph = new AmCharts.StockGraph();
				graph.valueField = "value";
				graph.bullet = "round";
				graph.bulletColor = "#FFFFFF";
				graph.bulletBorderColor = "#00BBCC";
				graph.bulletBorderAlpha = 1;
				graph.bulletBorderThickness = 2;
				graph.bulletSize = 7;
				graph.lineThickness = 2;
				graph.lineColor = "#00BBCC";
				graph.useDataSetColors = false;
				stockPanel.addStockGraph(graph);

				var stockLegend = new AmCharts.StockLegend();
				stockLegend.valueTextRegular = " ";
				stockLegend.markerType = "none";
				stockPanel.stockLegend = stockLegend;
				stockPanel.drawingIconsEnabled = true;

				chart.panels = [stockPanel];


				// OTHER SETTINGS ////////////////////////////////////
				var scrollbarSettings = new AmCharts.ChartScrollbarSettings();
				scrollbarSettings.graph = graph;
				chart.chartScrollbarSettings = scrollbarSettings;

				var cursorSettings = new AmCharts.ChartCursorSettings();
				cursorSettings.valueBalloonsEnabled = true;
				chart.chartCursorSettings = cursorSettings;

				var panelsSettings = new AmCharts.PanelsSettings();
				panelsSettings.creditsPosition = "bottom-right";
				chart.panelsSettings = panelsSettings;


				// PERIOD SELECTOR ///////////////////////////////////
				var periodSelector = new AmCharts.PeriodSelector();
				periodSelector.position = "bottom";
				periodSelector.periods = [{
					period: "DD",
					count: 10,
					label: "10 días"
				}, {
					period: "MM",
					count: 1,
					label: "1 mes"
				}, {
					period: "YYYY",
					count: 1,
					label: "1 año"
				}, {
					period: "YTD",
					label: "YTD"
				}, {
					period: "MAX",
					label: "MAX"
				}];
				chart.periodSelector = periodSelector;

				chart.write('chartdiv');
			}

		</script>
                
                
        
    </head>
    <body class="skin-blue">           
        
        <!-- header logo: style can be found in header.less -->
        <%@include file="jspf/header.jspf" %>
        <!-- header logo: style can be found in header.less -->
        
        <div class="wrapper row-offcanvas row-offcanvas-left">
            <!-- Left side column. contains the logo and sidebar -->
            <aside class="left-side sidebar-offcanvas">                
                <!-- sidebar: style can be found in sidebar.less -->
                <section class="sidebar">
                    <!-- Sidebar user panel -->
                    <div class="user-panel">
                        <div class="pull-left image">
                            <img src="img/avatar3.png" class="img-circle" alt="User Image" />
                        </div>
                        <div class="pull-left info">
                            <p>Hello, Jane</p>

                            <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
                        </div>
                    </div>
                    <!-- search form -->
                    <form action="#" method="get" class="sidebar-form">
                        <div class="input-group">
                            <input type="text" name="q" class="form-control" placeholder="Search..."/>
                            <span class="input-group-btn">
                                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
                            </span>
                        </div>
                    </form>
                    <!-- /.search form -->
                    
                    <!-- sidebar menu: : style can be found in sidebar.less -->
                    <%@include file="jspf/menu.jspf" %>
                    <!-- sidebar menu: : style can be found in sidebar.less -->
                    
                </section>
                <!-- /.sidebar -->
            </aside>

            <!-- Right side column. Contains the navbar and content of the page -->
            <aside class="right-side">                
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <h1>
                        Dashboard
                        <small>Mantenedor</small>
                    </h1>
                    <ol class="breadcrumb">
                        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
                        <li class="active">Dashboard</li>
                    </ol>
                </section>

                <!-- Main content -->
                <section class="content">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="box box-danger">
                                <div class="box-header">
                                    <h3 class="box-title">Grafica de Ventas</h3>                                    
                                </div>
                                <div class="row">
                                    <div class="col-xs-12" style="padding:0px 50px 20px 50px;">
                                    <div id="chartdiv" style="width:100%; height:500px;"></div>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    </div>

                    
                    
                    

                </section><!-- /.content -->
            </aside><!-- /.right-side -->
        </div><!-- ./wrapper -->


        <!-- jQuery 2.0.2 -->
        <script src="js/jquery.min.js"></script>
        <!-- Bootstrap -->
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
        <!-- AdminLTE App -->
        <script src="js/app.js" type="text/javascript"></script>

    </body>
</html>
